<template>
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>VIN码编辑</h5>
                    </div>
                    <div class="ibox-content">
                        <form method="get" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">品牌</label>
                                <div class="col-sm-10">
                                    <input type="text" v-model='car_vin.brand_name' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">主机厂</label>
                                <div class="col-sm-10">
                                    <input type="text" v-model='car_vin.factory_name' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">车系</label>
                                <div class="col-sm-10">
                                    <input type="text" v-model='car_vin.model_name' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">具体车型</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='car_vin.model_type' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">年份</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='car_vin.year' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">排量(发动机)</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='car_vin.engine' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">档位</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='car_vin.gearbox_lv' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">变速箱</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='car_vin.gearbox' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">建议使用油品</label>

                                <div class="col-sm-10">
                                    <select class="form-control m-b"  v-model='selected_oil_id'>
                                        <option v-bind:value="oil.id"  v-for="oil in oils">{{oil.name}}</option>

                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">原厂出装量</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='car_vin.oil_regional' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">循环机更换量</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='car_vin.oil_change' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">数据来源</label>

                                <div class="col-sm-10">
                                    <span class="form-control" v-if="car_vin.source=='linghang'">领航</span>
                                    <span class="form-control" v-if="car_vin.source=='juhe'">聚合数据API</span>
                                    <span class="form-control" v-if="car_vin.source=='lopal'">龙蟠</span>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <a class="btn btn-primary" v-on:click="vin_edit()" >保存内容</a>
                                    <!--<button class="btn btn-white" type="submit">取消</button>-->
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>查询记录</h5>
                        <div class="ibox-tools hide">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="table_basic.html#">选项1</a>
                                </li>
                                <li><a href="table_basic.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <table class="table table-bordered">
                            <thead>
                            <tr >
                                <th>ID</th>
                                <th>IP</th>
                                <th>国家</th>
                                <th>省份</th>
                                <th>市(县)</th>
                                <th>时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in logs">
                                <td>{{item.id}}</td>
                                <td>{{item.ip}}</td>
                                <td>{{item.country}}</td>
                                <td>{{item.province}}</td>
                                <td>{{item.city}}</td>
                                <td>{{item.created_at}}</td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import config from '../config'
    export default{
        name : 'vin_edit',
        vin : 0,
        data () {
            return {
                car_vin:{
                    'vin':'',

                    'brand_name':'',
                    'factory_name':'',
                    'model_name':'',
                    'model_type':'',

                    'year':'',
                    'engine':'',
                    'gearbox_lv':'',
                    'gearbox':'',

                    'oil_id':'',
                    'oil_change':'',
                    'oil_regional':'',

                    'info':'',
                    'source':'',
                },
                selected_oil_id:0,
                oils:[],
                logs:[],
                getVin : function(){
                    var api_token = localStorage.getItem('api_token');
                    var url =  config.api_url + '/backend/vin/' + this.vin + '?api_token=' + api_token;
                    var t = this;
                    $.ajax({
                        type: "get",
                        url: url,
                        dataType: 'json',
                        data: {},
                        xhrFields:true,
                        success:function( json ){
                            if( json.status == undefined || json.status == 0 ) {
                                t.car_vin = $.extend(t.car_vin,json);
                                console.log( json );
                                console.log( t.car_vin );
                                t.selected_oil_id = t.car_vin.oil_id;
                                t.getOils();
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }
                        }
                    });

                }
                ,vin_edit : function(){
                    var api_token = localStorage.getItem('api_token');
                    var url =  config.api_url + '/backend/vin/' + this.vin + '/edit' + '?api_token=' + api_token;
                    var t = this;
                    t.car_vin.oil_id = t.selected_oil_id;
                    $.ajax({
                        type: "post",
                        url: url,
                        dataType: 'json',
                        data: t.car_vin,
                        xhrFields:true,
                        success:function( json ){

                            if( json.status == undefined || json.status == 0 ) {
                                alert('保存成功');
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }
                        }
                    });
                }
                ,getOils : function(){
                    var api_token = localStorage.getItem('api_token');
                    var url =  config.api_url + '/backend/oil/all' + '?api_token=' + api_token;
                    var t = this;
                    $.ajax({
                        type: "get",
                        url: url,
                        dataType: 'json',
                        data: {},
                        xhrFields:true,
                        success:function( json ){

                            if( json.status == undefined || json.status == 0 ){
                                for(var i =0;i < json.length; i ++){
                                    t.oils.push( json[i]);
                                }
                                t.selected_oil_id = t.car_vin.oil_id;
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }
                        }
                    });
                }
                ,getVinLog : function(){
                    var api_token = localStorage.getItem('api_token');
                    var url = config.api_url + '/backend/vin/log/list' + '?api_token=' + api_token;
                    var t = this;
                    $.ajax({
                        type: "get",
                        url: url,
                        dataType: 'json',
                        data: { vin : t.vin },
                        xhrFields:true,
                        success:function( json ){
                            t.list = [];
                            if( json.status == undefined || json.status == 0 ){
                                for(var i =0;i < json.list.length; i ++){
                                    t.logs.push( json.list[i]);
                                }
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }

                        }
                    });
                }
            }
        }
        ,created: function(){
            this.vin = this.$route.params.vin;
            this.getVin();
            this.getVinLog();
        }

    }
</script>

